  <template>
  <div>
    <!-- <van-area title="标题" :area-list="areaList" @confirm="events" /> -->
    <ul class="top">
      <li>30天无忧退货</li>
      <li>48小时快速退款</li>
      <li>满88元免邮费</li>
    </ul>

    <van-swipe-cell v-for="item in list" :key="item.id">
      <van-checkbox
        v-model="item.isCollected"
        checked-color="#ee0a24"
      ></van-checkbox>
      <van-card
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        class="goods-card"
        :thumb="item.list_pic_url"
      />
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="shanchu(item)"
        />
      </template>
    </van-swipe-cell>

    <div class="bottom">
      <van-checkbox v-model="isAllCollected" checked-color="#ee0a24">
        全选</van-checkbox
      >
      <div class="right">
        ¥ &nbsp; &nbsp; &nbsp;{{ jiezhang }}
        <van-button type="danger" @click="goOrder">下单</van-button>
      </div>
    </div>
  </div>
</template>

  <script>
// import { areaList } from "@vant/area-data";
import { Toast, Dialog } from "vant";

import { submitAction } from "@/api/cart/order/index";
import { cartList, deleteAction } from "@/api/cart/index";

export default {
  data() {
    return {
      list: [],
      // areaList,

      // checked: false,
    };
  },
  computed: {
    isAllCollected: {
      get() {
        if (this.list.length == 0) {
          return false;
        }
        return this.list.every((ele) => ele.isCollected);
      },
      set(val) {
        console.log(val);
        this.list.forEach((ele) => {
          ele.isCollected = val;
        });
      },
    },
    jiezhang() {
      return this.list.reduce((total, cur) => {
        if (cur.isCollected) {
          return total + cur.number * cur.retail_price;
        } else {
          return total;
        }
      }, 0);
    },
  },
  created() {
    cartList({
      openId: localStorage.getItem("openId"),
    }).then((res) => {
      console.log(res);

      res.data.data.forEach((ele) => {
        ele.isCollected = false;
      });
      this.list = res.data.data;
    });
  },

  methods: {
    shanchu(item) {
      Dialog.confirm({
        title: "标题",
        message: "弹窗内容",
      })
        .then(() => {
          console.log(item);

          const index = this.list.findIndex((el) => el.id == item.id);
          const id = this.list[index].id;

          this.list.splice(index, 1);
          deleteAction({
            id: id,
          }).then((res) => {
            //   console.log(res);
          });
        })
        .catch(() => {
          Toast({
            message: "您取消了删除",
            position: "middle",
          });
        });
    },
    // events(val) {
    //   console.log(val);
    //   var arr = val.map((el) => {
    //     return el.name;
    //   });
    //   console.log(arr.join(""));
    // },
    goOrder() {
      if (this.jiezhang == 0) {
        Toast({
          message: "请选择商品",
          position: "middle",
        });
      } else {
        // this.$router.push({ path: "/cart/order" });
        var arr = this.list.filter((el) => {
          return el.isCollected != false;
        });
        // console.log(arr);
        var newArr = arr.map((el) => {
          return el.goods_id;
        });
        //  console.log(newArr);
        var goodsId = newArr.join(",");
        //  console.log(goodsId);
        submitAction({
          allPrise: this.jiezhang,
          goodsId: goodsId,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          console.log(res);
        });
        this.$router.push({ path: "/cart/order" });
      }
    },
  },
};
</script>

<style scoped lang='scss'>
.top {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10px;
  justify-content: space-around;
  align-items: center;
  font-size: 0.33333rem;
  color: #666;
  background-color: #f4f4f4;
  li {
    float: left;
  }
}

.goods-card {
  margin: 0;
  background-color: white;
  margin-left: -10px;

  ::v-deep .van-swipe-cell .van-card {
    width: 7.4rem;

    margin-left: 1.33333rem !important;
    margin-left: 28px;
  }
  .van-card__num {
    float: right;
    color: #969799;
    position: absolute;
    top: 40px;
    right: -14px;
  }
  .van-image {
    position: relative;
    display: inline-block;
    margin-left: -102px;
  }
  .van-card__content  {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-width: 0;
    min-height: 2.346667rem;
    margin-left: -30px;
    margin-left: -2.8rem;
  }
}

.van-swipe-cell {
  width: 96%;
  overflow: hidden;

  text-align: center;
  height: 96px;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  box-sizing: border-box;

  margin-bottom: 8px;

  .van-checkbox {
    float: left;
    width: 40px;
    height: 40px;
    height: 100px;
  }
  .van-card {
    width: 240px;

    margin-left: 80px;
  }
  .delete-button {
    height: 100%;

    // height: 100px;
  }
}
.bottom {
  position: fixed;
  // bottom: 30px;
  bottom: 1.8rem;
  height: 50px;
  line-height: 50px;
  text-align: center;
  // border: 1px solid red;
  box-sizing: border-box;
  width: 100%;
  padding: 0 10px;
  .van-checkbox {
    float: left;
    height: 50px;
    display: flex;
    width: 52px;
    // border: 1px solid red;
  }
  .right {
    float: right;
    color: #ee0a24;
    margin: 0 auto;
  }
}
</style>